<!DOCTYPE html>
<html lang='zh-CN'>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>登录页面</title>
<link rel="icon" href=favicon.ico" type="image/ico">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/materialdesignicons.min.css" rel="stylesheet">
<link href="js/bootstrapvalidator/dist/css/bootstrapValidator.css" rel="stylesheet">
<link href="css/style.min.css" rel="stylesheet">
<link href="css/login.css" rel="stylesheet">
<style>
.lyear-wrapper {
    position: relative;
}
.lyear-login {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
.login-center {
    background: #fff;
    min-width: 38.25rem;
    padding: 2.14286em 3.57143em;
    border-radius: 5px;
    margin: 2.85714em 0;
}
.login-header {
    margin-bottom: 1.5rem !important;
}
.login-center .has-feedback.feedback-left .form-control {
    padding-left: 38px;
    padding-right: 12px;
}
.login-center .has-feedback.feedback-left .form-control-feedback {
    left: 0;
    right: auto;
    width: 38px;
    height: 38px;
    line-height: 38px;
    z-index: 4;
    color: #dcdcdc;
}
.login-center .has-feedback.feedback-left.row .form-control-feedback {
    left: 15px;
}
.ui-slider-wrap {
    background: #ececec;
    position: relative;
    -webkit-border-radius: 2px;
    border-radius: 2px;
}
.ui-slider-wrap .ui-slider-bg {
    width: 0;
    -webkit-border-radius: 2px;
    border-radius: 2px;
}
.ui-slider-wrap .ui-slider-btn {
    position: absolute;
    top: 0;
    left: 0;
    cursor: move;
    text-align: center;
    box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.125);
    background: #fff;
    -webkit-border-radius: 2px;
    border-radius: 2px;
}
.ui-slider-wrap .ui-slider-btn {
    background: #fff;
}
.ui-slider-wrap .ui-slider-btn:before {
    display: inline-block;
    font: normal normal normal 24px/1 "Material Design Icons";
    font-size: inherit;
    text-rendering: auto;
    line-height: inherit;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content: "\f13e";
}
.ui-slider-wrap .ui-slider-btn.success:before {
    content: "\f12c";
}
.ui-slider-wrap .ui-slider-text {
    width: 100%;
    height: 100%;
    text-align: center;
    position: absolute;
    top: 0;
    left: 0;
    color: #4d5259;
}
.ui-slider-wrap .ui-slider-no-select {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none
}
</style>
</head>

<body>
<div id="particles-js">
  <div class="lyear-login">
    <div class="login-center">
      <div class="login-header text-center">
        <img alt="light year admin" src="images/logo-sidebar.png">
      </div>

      <form method="post" id="loginForm" autocomplete="off">
          <div class="form-group has-feedback feedback-left">
            <input type="text" placeholder="请输入您的用户账号" class="form-control" name="account"/>
            <span class="mdi mdi-account form-control-feedback" aria-hidden="true"></span>
          </div>
          <div class="form-group has-feedback feedback-left">
            <input type="text" placeholder="请输入密码" class="form-control" name="password" onfocus="this.type='password'" autocomplete="off"/>
            <span class="mdi mdi-lock form-control-feedback" aria-hidden="true"></span>
          </div>
          <div class="form-group has-feedback feedback-left row">
            <div class="col-xs-7">
                <div id="slider-verification" class="slider"></div>
            </div>
            <div class="col-xs-5" style="display: none">
              <img src="/captcha" class="pull-right" id="captcha">
            </div>
          </div>
          <div style="text-align:center;color: #c9302c" id="errorinfo"></div>
          <div class="form-group">
            <button class="btn btn-block btn-primary" type="button" id="saveFormBtn">立即登录</button>
          </div>
      </form>

      <hr>
      <footer class="col-sm-12 text-center">
        <p class="m-b-0">Copyright © 2020 <a href="https://gitee.com/brother-ting/om" target="_blank">分布式开源商城</a>. All right reserved</p>
      </footer>
    </div>
  </div>
</div>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/bootstrapvalidator/dist/js/bootstrapValidator.js"></script>
<script type="text/javascript" src="js/zero2one/zero2one.version.js"></script>
<script type="text/javascript" src="js/zero2one/zero2one.core.js"></script>
<script type="text/javascript" src="js/particles.min.js"></script>
<script type="text/javascript" src="js/dl.js"></script>
<script type="text/javascript" src="js/jquery.sliderVerification.min.js"></script>
<script type="text/javascript">

    var verificationStatus = false;
    $(document).ready(function() {
        $("#slider-verification").slider({
            width: 375,                     // width
            height: 38,                     // height
            sliderBg: "#f9fafb",            // 滑块背景颜色
            color: "#8b95a5",               // 文字颜色
            fontSize: 14,                   // 文字大小
            bgColor: "#15c377",             // 背景颜色
            textMsg: "按住滑块，拖拽验证",     // 提示文字
            successMsg: "验证通过了哦",       // 验证成功提示文字
            successColor: "#fff",           // 滑块验证成功提示文字颜色
            time: 400,                      // 返回时间
            callback: function(result) {    // 回调函数，true(成功),false(失败)
                verificationStatus = result;
                if (result){
                   $("#errorinfo").html("");
                }
            }
        });
    });

    $('#loginForm').bootstrapValidator({
        fields: {
            account: {validators: {notEmpty: {message: '用户账号不能为空'}}},
            password: {validators: {notEmpty: {message: '用户密码不能为空'}}},
            authCode: {validators: {notEmpty: {message: '验证码不能为空'}}}
        }
    });

    $("#saveFormBtn").click(function () {
        login();
    });

    //绑定enter登陆
    document.onkeydown =cdk;
    function cdk(){
        if(event.keyCode ==13){
            login();
        }
    }

    function login() {
        if (verificationStatus){
            var bv = $('#loginForm').data('bootstrapValidator');
            bv.validate();
            if (bv.isValid()) {
                zero2one.requestV("/login",$("#loginForm").serialize(),function (data) {
                    if(data.success){
                        window.location.href = "/index.html";
                    } else{
                        $("#errorinfo").html(data.msg);
                    }
                });
            }
        }else {
            $("#errorinfo").html("请先通过滑块验证");
        }

    }



</script>
</body>
</html>
